<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <!--设置标签图标-->
    <link href="favicon.ico" rel="shortcut icon">
   
    <style>
    	.reg_h_left img{
    		width:100px;
    		height:100px;
    		
    	}
    	#reg_header{
    height: 110px;
    width: 100%;
    box-shadow: 5px 0px 15px #ccc;
    /*x 鏂瑰悜鍋忕Щ閲�  y 鏂瑰悜鍋忕Щ閲�   妯＄硦绋嬪害   棰滆壊*/
}
#reg_header .reg_h_center{
    width: 1200px;
    height: 110px;
    margin: 0 auto;

    display: flex;
}
#reg_header .reg_h_center .reg_h_left{
    height: 110px;
    flex: 1;

}
#reg_header .reg_h_center .reg_h_left img{
    width: 160px;
    height: 100px;
    float: left;
}
#reg_header .reg_h_center .reg_h_left h4{
    float: left;
    font-size: 20px;
    margin-top: 70px;
    margin-left: 20px;
}

#reg_header .reg_h_center .reg_h_right{
    height: 110px;
    flex: 1;
    text-align: right;
    padding-top: 60px;
    padding-right: 20px;

}
#reg_header .reg_h_center .reg_h_right a{
    float: right;
    font-size: 15px;
    color: #666;
    margin-left: 10px;
}
#reg_header .reg_h_center .reg_h_right span{
    float: right;
    font-size: 15px;
    color: #666;
}

#reg_content {
    width: 1200px;

    height: 700px;
    margin: 20px auto;
    display: flex;
}
#reg_content  .reg_content_left{
    flex: 2;
    position: relative;
}
#reg_content  .reg_content_left form{
    margin: 50px auto;
    display: block;
    width: 450px;
}
#reg_content  .reg_content_left form div{
    width: 439px;
    height: 64px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    line-height: 64px;
    padding-left: 20px;
    font-size: 16px;
    color: #666;
    position: relative;

}
#reg_content  .reg_content_left form div:last-child{
    border:  none;
    padding: 0;
}
#reg_content  .reg_content_left form img{
    width: 108px;
    height: 40px;
    position: absolute;
    top: 12px;
    right: 10px;
}
#reg_content  .reg_content_left form .submit_button input{
    width: 439px;
    height: 44px;
    background: #ff4400;
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
#reg_content  .reg_content_left form input::-webkit-input-placeholder{
    font-size: 14px;

}
#reg_content  .reg_content_right{
    flex: 1;
    border-left: 1px solid #ccc;
    padding: 50px 0 0 50px;
}
    	
    </style>
</head>
<body>
<c:if test="${sessionScope.user==null }">
	请先登录。
</c:if>
<c:if test="${sessionScope.user!=null }">
<!--头部-->
<div id="reg_header">
    <div class="reg_h_center">
        <div class="reg_h_left">
        	<a href="IndexGoodsServlet?category=1">
            	<img src="images/logo.png" alt="">
            </a>
            <h4>修改信息</h4>
        </div>

        <div class="reg_h_right">
            <a href="login.jsp">请登录</a>
            <span>已有账户</span>

        </div>
    </div>
</div>
<!--表单内容-->
<div id="reg_content">
    <div class="reg_content_left">
        <form action="#">

            <div>
                <label>用户名</label>
                <label style="color:red;">${sessionScope.user.username }</label>
                <input type="hidden" id="username" value="${sessionScope.user.username }">
            </div>
            <div>
                <label>电话</label>
                <input id="phone" type="text" value="${sessionScope.user.phone }">
            </div>
            <div class="check_box">
                <label>验证码</label>
                <input id="request" type="text">
                <img src="CheckingServlet" onclick="change(this)">
            </div>
            <div class="submit_button">
                <input type="button" id="regist" value="立即修改">
            </div>

        </form>
    </div>
    <div class="reg_content_right">
        <a href="#">
            <img src="images/reg_right.png" alt="">
        </a>
    </div>
</div>

<jsp:include page="footer.jsp"></jsp:include>
</c:if>
<script src="js/jquery.min.js"></script>

<script>
$(document).ready(function(){
	$("#regist").click(function(){
		var userName = $("#username").val();
		var phone =$("#phone").val();
		var checking = $("#request").val();
		if(phone==""){
			alert("电话号码不能为空");
			return;
		}
		if(checking==""){
			alert("请输入验证码");
			return;
		}
		$.post("EditUserServlet",{
			userName:userName,
			phone:phone,
			request:checking
		},function(data){
			if(data=="OK"){
				alert("修改成功");
				window.location.href="IndexGoodsServlet?";
			}
			if(data=="checkingError"){
				alert("验证码错误");
			}
		})
	})
})
function change(obj){
	obj.src = "CheckingServlet?time="+new Date().getTime();
}
</script>
</body>
</html>